<template>
  <div>
    <!-- 产品缺陷分析报表 -->
    <div class="produce_content">
      <div class="produce_top">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">机种编码</div>
            <el-autocomplete
              popper-class="my-autocomplete"
              size="mini"
              @input="(e) => (formInline.recipe = validForbid(e))"
              class="product"
              style="margin-left: 10px; width: 140px; margin-top: 8px"
              v-model="formInline.recipe"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </div>

          <!-- 工业 -->
          <div class="table_serch_labe" style="margin-left: 30px">
            <div class="table_serch_labe_title">工单编码</div>
            <el-form-item label="">
              <el-autocomplete
                class="product"
                size="mini"
                @input="(e) => (formInline.order = validForbid(e))"
                popper-class="my-autocomplete"
                style="margin-left: 10px; width: 140px"
                v-model="formInline.order"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick"
                >
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 40px">
            <div class="table_serch_labe_title">线体编码</div>
            <el-form-item label="">
              <el-autocomplete
                class="product"
                size="mini"
                @input="(e) => (formInline.line = validForbid(e))"
                popper-class="my-autocomplete"
                style="margin-left: 10px; width: 140px"
                v-model="formInline.line"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick"
                >
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 40px">
            <div class="table_serch_labe_title">站点编码</div>
            <el-form-item label="">
              <el-autocomplete
                class="product"
                @input="(e) => (formInline.site = validForbid(e))"
                size="mini"
                popper-class="my-autocomplete"
                style="margin-left: 10px; width: 140px"
                v-model="formInline.site"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick"
                >
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 40px">
            <div class="table_serch_labe_title">产品ID</div>
            <el-form-item label="">
              <el-autocomplete
                class="product"
                size="mini"
                popper-class="my-autocomplete"
                style="margin-left: 10px; width: 140px"
                v-model="formInline.pannalid"
                @input="(e) => (formInline.pannalid = validForbid(e))"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick"
                >
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 70px">
            <el-button
              type="mini"
              style="height: 30px; margin-top: 6px"
              @click="productanalysis"
              >查询</el-button
            >
            <!-- <el-button type="mini">刷新</el-button>
            <el-button type="mini">运行</el-button> -->
          </div>
        </el-form>
      </div>
      <!--头部表格 :cell-style="isClity"-->
      <div class="table_top">
        <div style="padding: 10px; font-size: 12px">产品缺陷统计</div>
        <el-table
          :data="tablelist"
          border
          size="small"
          :row-style="{ height: '0px' }"
          style="font-size: 10px"
          :show-header="false"
        >
          <el-table-column prop="ABI" :label="this.ABI">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.ABI)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="AFI" :label="this.AFI">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.AFI)"></span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="DOA" :label="this.DOA" v-if="this.tablelist[3]"> -->
          <!-- <template slot-scope="scope">
              <span v-html="showDate(scope.row.DOA)"></span>
            </template> -->
          <!-- </el-table-column> -->

          <el-table-column prop="EAC" :label="this.EAC" v-show="tatleshow">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.EAC)"></span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="Class" :label="this.Class"></el-table-column> -->
          <el-table-column prop="Result" :label="this.Result"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 图像显示部分 -->
    <div class="produce_hader">
      <div class="hader_title">
        <div>定位图像</div>
        <div style="display: flex">
          <div style="margin-left: 10px">画面</div>
          <div style="margin-left: 10px">
            <el-select
              v-model="value"
              @change="onclickcheng"
              placeholder="请选择"
              style="width: 120px; height: 40px"
            >
              <el-option
                v-for="item in listitems"
                :key="item.value"
                :label="item.value"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div>局部缺陷图像</div>
        <div style="display: flex">
          <div class="s1">站点</div>
          <div style="margin-left: 10px">
            <el-select
              v-model="val"
              @change="onchange"
              style="width: 120px; height: 40px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.dev"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="produce_hader_img">
        <div class="produce_hader_left">
          <div v-for="(item, index) in listitems" :key="index">
            <img
              :src="item.path"
              alt=""
              v-show="item.isshow"
              class="produce_hader_left_img"
            />
          </div>
        </div>

        <div class="produce_hader_right">
          <div
            class="produce_hader_item_img"
            v-for="(item, index) in listimg"
            :key="index"
          >
            <img :src="item.path" alt="" style="width: 100%; height: 100%" />
          </div>
        </div>
      </div>
    </div>

    <!-- t图表-->
    <div class="hader_myspl">
      <!-- <div id="my_svg"></div> -->
    </div>

    <!-- 表格 1-->
    <div style="background: #ffffff">
      <div style="padding: 5px; font-size: 12px">站点信息统计</div>
      <div class="hader_table">
        <el-table
          :data="this.tabledata"
          border
          style="width: 100%; height: 300px"
        >
          <el-table-column prop="ID" label="ID"> </el-table-column>
          <el-table-column prop="Code" label="Code"> </el-table-column>
          <el-table-column prop="X" label="x(cm)"> </el-table-column>
          <el-table-column prop="Y" label="y(cm)"> </el-table-column>
          <el-table-column prop="Pat" label="Pat"> </el-table-column>
          <el-table-column prop="Area" label="Area"> </el-table-column>
        </el-table>
      </div>
    </div>

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
    <!-- <About></About> -->
  </div>
</template>
<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
// import About from '../../About'
export default {
  components: { Popup },
  data() {
    return {
      tatleshow: false,
      Popup_show: false,
      tableitem: "undefined",
      value: "",
      val: "",
      timer: 0,
      valtimer: "",
      isshow: false,
      search: "NG",

      items: [],
      tablelist: [],
      options: [],
      listitems: [],
      listimg: [],

      formInline: {
        recipe: "VR2-1-24",
        line: "",
        site: "",
        order: "",
        encoder: "",
        pannalid: "44-9742282B1099C0EZEA1BC1J8190",
      },
      restaurants: [],
      alysisen: [],
      ABI: "",
      Result: "",
      DOA: "",
      EAC: "",
      AFI: "",
      Class: "",
      tabledata: [],

      obj: {
        name: "暂无数据",
        path: "http://10.1.109.181:8080/image/White-0_01N.jpg",
      },
    };
  },
  computed: {
    tables: function () {
      var val = this.search;
      if (val) {
        return this.items.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key].toLowerCase().indexOf(val) > -1);
          });
        });
      }
      return this.items;
    },
  },
  created() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  methods: {
    ///判断每个名字给不同名字添加不同的数组渲染页面
    onchange() {
      let contlist = [];
      this.options.forEach((ele) => {
        if (this.val == ele.dev) {
          contlist = ele;
          // console.log("======================", contlist);
          this.listimg = contlist.errorPic;
          this.listitems = contlist.bigPic;
          this.tabledata = contlist.con;
          if (this.listitems.length == 0) {
            this.listitems.push(this.obj);
          }
          if (this.listimg.length == 0) {
            this.listimg.push(this.obj);
            for (let i = 0; i < this.listimg.length; i++) {
              this.listimg.push(this.obj);
              if (this.listimg.length == 16) {
                return false;
              }
            }
          } else {
            if (this.listimg.length != 16) {
              for (let i = 0; i < this.listimg.length; i++) {
                this.listimg.push(this.obj);
                if (this.listimg.length == 16) {
                  return false;
                }
              }
            }
          }
        }
      });
    },

    onclickcheng() {
      //切换画面
      this.listitems.forEach((ele) => {
        if (ele.name == this.value) {
          ele.isshow = true;
        } else {
          ele.isshow = false;
        }
      });
    },

    //查询数据请求
    productanalysis() {
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.pannalid == "") {
        this.$alert("产品id不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: "dataanalysis",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var reult = res.data;
          var tisv = this;
          if (reult.code == 200) {
            this.tablelist = [];
            this.options = [];
            this.alysisen = reult.data;
            
            setTimeout(() => {                                 //判断是否有数据 显示提示框
              if (this.alysisen.length == "") {
                this.Popup_show = true;
                this.Popup_timer = setInterval(() => {
                  this.timer++;
                }, 1000);
              } else {
                return;
              }
            }, 5000);


            console.log(this.alysisen);
            tisv.items = this.alysisen.table1;
            this.options = this.alysisen.table2;
            var url = "";
            var pathurl = ""; //取画面的name 和 地址

            this.options.forEach((ele) => {
              ele.bigPic.forEach((ele) => {
                url = ele.path.replace(
                  "Z:/imageToWeb",
                  "http://10.1.109.181:8080"
                );
                ele.path = url;
              });

              ele.errorPic.forEach((ele) => {
                pathurl = ele.path.replace(
                  "Z:/imageToWeb",
                  "http://10.1.109.181:8080"
                );
                ele.path = pathurl;
              });
            });

            // console.log("返回列表数据1", this.items.length);

            if (this.items[1]) {
              // console.log("有数据");
              for (let i = 0; i < this.items.length; i++) {
                let obj = {
                  ABI: this.items[i][0],
                  AFI: this.items[i][1],
                  EAC: this.items[i][2],
                  Result: this.items[i][3],
                  Class: this.items[i][4],
                  DOA: this.items[i][5],
                };
                this.tablelist.push(obj);
                // console.log(this.tablelist);
              }
            } else {
              // console.log("没有数据");
              return;
            }
          } else if (reult.code == 204) {
            this.$alert(reult.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      // console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },

    // 筛选变色
    showDate(val) {
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#FF0000">' + this.search + "</font>"
        );
      } else {
        return val;
      }
    },
    loadAll() {
      return [{ value: "", address: "" }];
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    /////
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style scoped>
.produce_content {
  width: 100%;
}
.produce_top {
  width: 100%;
  /* border: 1px solid #000; */
  background: #ffffff;
}
.table_top {
  width: 100%;
  /* border:1px solid #000; */
  background: #ffffff;
  box-shadow: 0px 0px 0px 2px gainsboro;
  margin-top: 10px;
}

.produce_hader {
  width: 100%;
  /* border: 1px solid #000; */
  background: #ffffff;
  margin-top: 8px;
}

.hader_title {
  width: 100%;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hader_title div {
  font-size: 12px;
  align-items: center;
}
.s1 {
  margin-top: 1px;
  margin-right: 10px;
}
.end_btn {
  width: 160px;
  height: 30px;
  /* line-height: 30px; */
}
.hader_content {
  min-width: 1000px;
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
}
.hader_content_two {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.hader_content_two_left {
  width: 35%;
  margin-left: 100px;
}

.hader_left {
  width: 35%;
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
}

.hader_left_img {
  width: 70%;
  height: 390px;
}

.hader_content_two_right {
  width: 60%;
  /* border: 1px solid red; */
}

.hader_content_two_right_img {
  width: 78%;
  height: 390px;
  margin-left: 10px;
}

.hader_serisn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  /* border: 1px solid blue; */
}
.hader_serisn_left {
  width: 35%;
  margin-left: 100px;
}
.hader_serisn_right {
  width: 60%;
  margin-right: 50px;
}

.hader_serisn_right_img {
  width: 85%;
  height: 390px;
  margin-left: 10px;
}
.hader_flow {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.hader_flow_left {
  width: 35%;
  margin-left: 100px;
}
.hader_flow_right {
  width: 60%;
  margin-right: 50px;
}

.hader_right {
  width: 60%;
  margin-right: 70px;
}
.hader_right_item {
  width: 120px;
  height: 120px;
  margin: 2px;
  margin-left: 10px;
}

.hader_right_img {
  width: 90%;
  height: 390px;
}
.img_type {
  width: 80%;
  height: 350px;
}

.hader_myspl {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 2px gainsboro;
}
.hader_table {
  width: 100%;
  box-shadow: 0px 0px 0px 2px gainsboro;
  margin-top: 10px;
  background: #ffffff;
}

/* 搜索框 */
.table_serch {
  width: 100%;
  /* min-width:1000px; */
  /* padding-top: 8px; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* height: 35px; */
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 20px;
  margin-left: -6px;
}
.product {
  width: 120px;
}

#my_svg {
  width: 100%;
  height: 270px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
.produce_hader_img {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 10px;
  display: flex;
}
.produce_hader_left {
  width: 40%;
}
.produce_hader_left_img {
  width: 270px;
  height: 400px;
  margin-left: 300px;
  margin-top: 10px;
}

.produce_hader_right {
  width: 500px;
  /* min-width:900px; */
  /* border:1px solid #000; */
  display: flex;
  flex-wrap: wrap;
  margin-left: 150px;
}

.produce_hader_item_img {
  width: 90px;
  height: 90px;
  border: 1px solid gainsboro;

  margin-left: 10px;
}
</style>
